<template>
    <div>
        <p>
            <progress id="uploadProgress" :value="oProgress"></progress>
        </p>
        <p>
            <input type="file" id="videoUpload" >
        </p>
        <p>
            <span id="uploadInfo">{{ uploadInfo }}</span>
        </p>
        <p>
            <button id="upload" @click="uploadVideo">上传视频</button>
        </p>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue'
// import { upload_video } from '@from/request/api/api.ts'


//进度条值
const oProgress = ref(0)
//上传信息
const uploadInfo = ref('')
//上传视频
// const videoUpload =document.getElementById('videoUpload')

//切割大小
const CHUNK_SIZE = 1 * 1024 * 1024
//上传切片
let uploadSize: any = 0


//判断值
const ALLOWED_TYPE: any = {
    'video/mp4': 'mp4',
    'video/ogg': 'ogg',
}


const uploadVideo = async () => {
    const file: any = videoUpload.files[0] //获取传入的值
    if (!file) {
        uploadInfo.value = '请先选择一个文件' //非空判断
        return
    }
    if (!ALLOWED_TYPE[file.type]) {
        uploadInfo.value = '不支持的文件类型'
        return
    }

    const { name, size, type } = file
    //文件名
    const fileName: string = name //文件名
    let uploadResult: any = ref(null)   //上传结果
    oProgress.value = size  //进度条
    uploadInfo.value = `文件名：${name}，文件大小：${size}，文件类型：${type}` //上传信息


    while (uploadSize < size) {
        const fileChunk = file.slice(uploadSize, uploadSize + CHUNK_SIZE)//切割文件
        const formData: any = creatrFormData(name, size, type, fileName, uploadSize, fileChunk)//创建表单
        // const formData = {
        //     name,
        //     size,
        //     type,
        //     fileName,
        //     uploadSize,
        //     file: fileChunk
        // }



        try {
            uploadResult.value = await axios.post('http://localhost:3000/xxk_user/upload_video', formData)
            uploadInfo.value = uploadResult.value.data.msg
        } catch (error) {
            uploadInfo.value = '上传失败'
            console.log(error);
            return
        }
        uploadSize += fileChunk.size//进度条
        oProgress.value = uploadSize
    }
    // uploadInfo.value = '上传成功3333'
}

const creatrFormData = (name: any,
    size: any,
    type: any,
    filename: any,
    uploadSize: any,
    file: any) => {
    const fd = new FormData()
    fd.append('name', name);
    fd.append('size', size);
    fd.append('type', type);
    fd.append('filename', filename);
    fd.append('uploadSize', uploadSize);
    fd.append('file', file);
    console.log(file);
    
}




</script>

<style lang="scss" scoped></style>